<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>底部导航栏示例</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				height: 100vh;
			}

			.nav {
				width: 100%;
				height: 98px;
				position: fixed;
				bottom: 0;
			}

			.navbg {
				transform: translateX(50%);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				overflow: visible;
				pointer-events: none;
			}

			.navbar {
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;
				padding: 10px;
				width: calc(100% - 20px);
				height: 78px;
			}


			.nav-item {
				text-align: center;
				position: relative;
			}

			.nav-icon {
				font-size: 28px;
				display: block;
			}

			.nav-name {
				margin-top: 5px;
				color: #a8a8a8;
				font-size: 20px;
			}

			.nav-active .nav-name {
				color: red;
			}

			.service-icon {
				box-shadow: 0 0 20px 4px rgba(168, 168, 168, 0.7);
				border-radius: 50%;
				position: relative;
				bottom: 5px;
				z-index: 9;
			}

			.service-icon .nav-icon {
				border-radius: 50%;
				border: 1px solid #f7f7f7;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.service-icon img {
				width: 80px;
				height: 80px;
			}

			.notification {
				position: absolute;
				top: 0;
				right: -10px;
				background-color: red;
				color: white;
				border-radius: 50%;
				padding: 2px 5px;
				font-size: 12px;
			}
		</style>
	</head>
	<body>

		<div class="nav">
			<svg width="100%" height="98" class="navbg">
				<defs>
					<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
						<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(168,168,168,0.7)" />
					</filter>
				</defs>
				<line x1="-100" y1="10" x2="-999" y2="10" stroke="rgba(168,168,168,0.7)" stroke-width="1"
					style="filter: drop-shadow(0 2px 3px rgba(168,168,168,0.7));" />
				<path d="M 0 94 C -80 90, -40 15, -100 10" stroke="rgba(168,168,168,0.7)" fill="transparent" stroke-width="1"
					filter="url(#shadow)" />
				<path d="M 0 94 C 80 90, 40 15, 100 10" stroke="rgba(168,168,168,0.7)" fill="transparent" stroke-width="1"
					filter="url(#shadow)" />
				<line x1="100" y1="10" x2="999" y2="10" stroke="rgba(168,168,168,0.7)" stroke-width="1"
					style="filter: drop-shadow(0 2px 3px rgba(168,168,168,0.7));" />
			</svg>
			<div class="navbar">
				<div class="nav-item nav-active">
					<div class="nav-icon">🏠</div>
					<div class="nav-name">首页</div>
				</div>
				<div class="nav-item">
					<div class="nav-icon">📋</div>
					<div class="nav-name">订单</div>
				</div>
				<div class="nav-item service-icon">
					<div class="nav-icon">
						<img src="./server.png" alt="人工服务" width="56" height="56">
					</div>
				</div>
				<div class="nav-item">
					<div class="nav-icon">⚙️</div>
					<div class="nav-name">权限</div>
				</div>
				<div class="nav-item">
					<div class="nav-icon">👤</div>
					<div class="nav-name">我的</div>
					<span class="notification">3</span>
				</div>
			</div>
		</div>

	</body>
</html>